<!-- #layout name=blank -->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Media library</h1>
    <div class="btn-group pull-right">
      <a
        href="javascript:;"
        :class="{ active: curType == 'list' }"
        @click="changeType('list')"
        :title="Kooboo.text.tooltip.image.listView"
        class="btn btn-default"
      >
        <i class="fa fa-list fa-x2"></i>
      </a>
      <a
        href="javascript:;"
        :class="{ active: curType == 'grid' }"
        @click="changeType('grid')"
        :title="Kooboo.text.tooltip.image.gridView"
        class="btn btn-default"
      >
        <i class="fa fa-th"></i>
      </a>
    </div>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <ul class="nav nav-tabs">
    <li
      v-for="$data in imgTypes"
      :class="{ active: curImgType == $data.value }"
      @click="changeImgType($data.value)"
    >
      <a href="javascript:;">{{ $data.displayName }}</a>
    </li>
  </ul>
  <div class="navbar navbar-default" v-show="curImgType == 'all'">
    <div class="container-fluid">
      <a @click="onCreateFolder" class="btn green navbar-btn">New folder</a>
      <a class="btn green navbar-btn btn-file">
        <span>Upload images</span>
        <input v-kb-upload="uploadSetting" type="file" />
      </a>
      <a
        @click="editImage"
        v-show="selectedFiles.length == 1 && curType == 'grid' && selectedFiles[0].type == 'file'"
        class="btn green navbar-btn"
        >Edit</a
      >
      <a v-show="showDeleteBtn" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>

  <div
    class="page-bar"
    style="background: #f8f8f8"
    v-show="curImgType == 'all'"
  >
    <ol class="breadcrumb">
      <template v-for="($data, $index) in crumbPath">
        <li v-if="$index == (crumbPath.length - 1)" class="active" :key="$index"
          >{{ $data.name }}</li
        >
        <li v-else>
          <a
            @click="onChoosingFolder($data.fullPath)"
            href="javascript:;"
            :key="$index"
            >{{ $data.name }}</a
          >
        </li>
      </template>
    </ol>
  </div>

  <div class="table-responsive" v-if="curType == 'list'">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th class="table-checkbox" v-show="curImgType == 'all'">
            <input
              v-model="selectAll"
              :disabled="!folders.length && !files.length"
              type="checkbox"
            />
          </th>
          <th></th>
          <th class="table-sortby" :class="currentOrderCSS('url')">
            <a href="javascript:;" @click="changeSort('url')"
              >URL<i class="fa"></i
            ></a>
          </th>
          <th>Used by</th>
          <th class="table-sortby table-short" :class="currentOrderCSS('size')">
            <a href="javascript:;" @click="changeSort('size')"
              >Size<i class="fa"></i
            ></a>
          </th>
          <th class="table-sortby" :class="currentOrderCSS('date')">
            <a href="javascript:;" @click="changeSort('date')"
              >Last modified<i class="fa"></i
            ></a>
          </th>
          <th class="table-action"></th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="$data in folders"
          :key="$data.fullPath"
          @click="selectDoc($data)"
        >
          <td v-show="curImgType == 'all'"
            ><input
              style="pointer-events: none;"
              v-model="$data.selected"
              type="checkbox"
          /></td>
          <td class="table-thumbnail" align="right">
            <a href="javascript:;">
              <i class="table-icon fa fa-folder"></i>
            </a>
          </td>
          <td>
            <a
              @click.stop="onChoosingFolder($data.fullPath)"
              href="javascript:;"
            >
              {{ $data.name }}
            </a>
          </td>
          <td>-</td>
          <td>{{ $data.size || "-" }}</td>
          <td>{{ localDate($data.lastModified) }}</td>
          <td></td>
        </tr>
        <tr v-for="file in files" :key="file.id" @click="selectDoc(file)">
          <td v-show="curImgType == 'all'">
            <input
              style="pointer-events: none;"
              v-model="file.selected"
              type="checkbox"
            />
          </td>
          <td class="table-thumbnail">
            <a
              target="_blank"
              :href="file.previewUrl"
              @click.stop
              title="Preview"
            >
              <div class="thumbnail-fixed">
                <div class="img-wrap"></div>
                <img alt="" :src="file.thumbnail" />
              </div>
            </a>
          </td>
          <td>{{ file.url }}</td>
          <td>
            <template v-if="Object.keys(file.references).length > 0">
              <a
                v-for="refer in Object.keys(file.references)"
                @click.stop="getRelation(file, refer)"
                :style="{ background: Kooboo.getLabelColor(refer) }"
                href="javascript:;"
                class="label label-sm kb-table-label-refer"
                >{{ file.references[refer] + " " +
                Kooboo.text.component.table[refer.toLowerCase()] }}</a
              >
            </template>
            <template v-else>
              -
            </template>
          </td>
          <td>{{ Kooboo.bytesToSize(file.size) || "-" }}</td>
          <td>{{ localDate(file.lastModified) }}</td>
          <td class="table-action">
            <button
              v-if="file.mimeType == 'image/svg+xml'"
              class="btn blue disabled"
              title="Unable to edit SVG"
              @click.stop
              >Edit</button
            >
            <button v-else @click.stop="editImage(file)" class="btn blue"
              >Edit</button
            >
          </td>
        </tr>

        <tr v-if="folders.length + files.length == 0">
          <td class="text-center" colspan="100">Empty</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div v-if="curType == 'grid'" class="grid">
    <div class="grid-group folders">
      <div
        v-for="$data in folders"
        :key="$data.fullPath"
        @click="selectDoc($data)"
        :class="{active: $data.selected }"
        class="grid-item grid-folder"
      >
        <a @click.stop="onChoosingFolder($data.fullPath)" href="javascript:;">
          <span class="info">
            <span class="count">{{ $data.count }}</span>
            <span class="name">{{ $data.name }}</span>
          </span>
        </a>
        <input
          @click.stop="selectDoc($data)"
          type="checkbox"
        />
      </div>
    </div>
    <div class="grid-group files">
      <div
        v-for="$data in files"
        :key="$data.id"
        @click="selectDoc($data)"
        :class="{ 'grid-img': $data.isImage, active: $data.selected }"
        class="grid-item"
      >
        <a href="javascript:;">
          <span class="img-wrap"></span>
          <img alt="" :src="$data.thumbnail" />
          <span class="info">
            <span class="name">
              <i class="fa fa-file-image-o"></i>
              <!-- {{$data.name }} -->
            </span>
          </span>
        </a>
        <input
          v-model="$data.selected"
          style="pointer-events: none;"
          type="checkbox"
        />
      </div>
    </div>
  </div>

  <kb-pager
    :page-nr="pager.pageNr"
    :total-pages="pager.totalPages"
    @change="changePage"
  ></kb-pager>
  <div
    v-kb-modal="newFolderModal"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="onNewFolderModalReset" class="close"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">New folder</h4>
        </div>
        <div class="modal-body">
          <kb-form :model="folderForm" :rules="folderRules" ref="folderForm">
            <kb-form-item prop="name">
              <label class="col-md-3 control-label">Name</label>
              <div class="col-md-9">
                <input
                  type="text"
                  v-model="folderForm.name"
                  class="form-control"
                  @keydown.enter="onNewFolderModalSubmit"
                />
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button @click="onNewFolderModalSubmit" class="btn green"
            >Save</button
          >
          <button @click="onNewFolderModalReset" class="btn gray"
            >Cancel</button
          >
        </div>
      </div>
    </div>
  </div>

  <kb-relation-modal></kb-relation-modal>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbRelationModal.js",
      "/_Admin/Scripts/components/kbPager.js",
      "/_Admin/Scripts/components/kbForm.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Contents/Images.js"></script>
